<template>
	<view class="content">
		<view class="header-ss">
			<u-search v-model="keyword" bg-color="#fff" :show-action="true" @custom="search"
				:action-style="search" @search="search" placeholder="搜Id/姓名/学校/专业/年级"></u-search>
			<!-- 			<view class="search" @tap="search">
				搜索
			</view> -->
		</view>
		<!-- 搜索历史 -->
		<view class="history">
			<view class="des">
				<text>搜索历史</text>
				<image @tap="del" style="width: 24rpx;
				height: 27rpx;" src="../../static/image/clear.png" mode=""></image>
			</view>
			<view class="list">
				<view class="list-item" v-for="item in history" :key="item.id" @tap="click(item.searchDetail)">
					<view class="class">{{item.searchDetail}}</view>
				</view>
			</view>
			<!-- <u-empty v-if="history.length===0" text="历史为空" mode="list"></u-empty> -->
		</view>
		<view class="teacher-item" v-for="item in datalist" :key="item.id" @tap="goDetail(item.id)">
			<view class="boxs">
				<view class="left">
					<image style="width: 154rpx; height: 205rpx;border-radius: 20rpx;"
						:src="item.bareheadedPhoto" mode="scaleToFill">
					</image>
					<p>ID：{{item.code}}</p>
				</view>
				<view class="center">
					<view style="margin-bottom: 15rpx;">
						{{item.realName}}
						<image v-if="item.gender==2" style="width: 31rpx;
					height: 31rpx; vertical-align: middle; margin-left: 17rpx;" src="/static/image/women.png" mode=""></image>
						<image v-else style="width: 31rpx;
					height: 31rpx; vertical-align: middle; margin-left: 17rpx;" src="/static/image/man.png" mode=""></image>
					</view>
						<p class="school" style="width: 300rpx;display: block;">{{item.graduateSchool}}-{{item.speciality}}</p>
					
					<view style="display: flex; align-items: center;position: absolute;">
						<p  class="education"
							style="font-size: 26rpx;color: #444444;">
							{{item.categoryList[item.categoryList.length-1].categoryName}}
						</p>
					</view>
		
					<view style="display: flex;align-items: center;margin-top: 50rpx;">
						<view :class="'grade'+ items.teachLv" class="grade"
							v-for="(items,index) in item.teacherCategoryConfigVOList">
							{{items.teachSubjectDetail}}
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view>
					<image style="margin-right: 7rpx;" src="/static/image/rz.png" mode=""></image>
					<text>{{item.certification?'已认证' : '未认证'}}</text>
				</view>
				<view style="margin-top: 182rpx;position: absolute; right: 50rpx;">
					<image style="margin-right: 7rpx;width: 15rpx;
				height: 19rpx;" src="/static/image/address.png" mode=""></image>
					<text style="color: #000;">{{item.distance}}</text>
				</view>
			</view>
		</view>
		<u-empty v-if="datalist.length===0" text="列表为空" mode="list"></u-empty>
		<!-- 		<u-loadmore v-else bg-color="#F2F2F6" :status="loadStatus" :icon-color="vuex_themeColor" :margin-top="10"
			margin-bottom="20" :load-text="loadText"></u-loadmore> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAuth: 0,
				teacList: [],
				// 分页
				pageCurrent: 1,
				pageSize: 15,
				pageTotal: 1, //总页码
				keyword: '',
				form: {
					keyword: '',
					memberId: ''
				},
				history: [],
				lat:'',
				lgt:'',
				datalist:[],
				size:10,
				totalPage:'',
				cityId:''
			}
		},
		onReachBottom() {
			let that = this
			var current = that.pageCurrent + 1
			if (current <= that.totalPage) {
				that.current = current
				that.$u.api.getTeachPage({
					current: that.pageCurrent,
					size: that.pageSize,
					queryType: '',
					lat: that.lat,
					lgt: that.lgt,
					keyword: that.keyword || '',
					cityId: that.vuex_sel.cityId || that.cityId,
					countyId: that.vuex_sel.countyId || '',
					memberId: that.vuex_user.id || '',
				}).then(data => {
					that.datalist = that.datalist.concat(data.records)
				})
			}
		},
		onLoad(opt) {
			if(opt){
				this.lat=opt.lat
				this.lgt=opt.lgt
				this.cityId=opt.cityId
			}
			this.getHistory()
		},
		onShow() {
			this.$u.api.myInfo().then(data => {
				this.isAuth = data.isAuth;
			});
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/contradict/teacherDetail?teacherId=${id}`
				})
			},
			click(name) {
				this.keyword=name
				this.getPage()
				// this.form.memberId = this.vuex_user.id
				// this.form.keyword = name

				// this.$u.vuex('vuex_search', this.form)
				// uni.navigateBack({
				// 	delta: 1
				// })
			},
			async getHistory() {
				this.history = await this.$u.api.getHistory({
					searchType: 2
				})
			},
			async search(e) {
				// this.form.memberId = this.vuex_user.id
				// this.$u.vuex('vuex_search', this.form)
				// uni.navigateBack({
				// 	delta: 1
				// })
				this.getPage()
			},
			getPage(){
				this.current = 1
				this.$u.api.getTeachPage({
					current: this.pageCurrent,
					size: this.pageSize,
					queryType: '',
					lat: this.lat,
					lgt: this.lgt,
					keyword: this.keyword,
					cityId: this.vuex_sel.cityId ||this.cityId,
					// cityId:'340100',
					countyId: this.vuex_sel.countyId || '',
					memberId: this.vuex_user.id || '',
				}).then(data => {
					this.datalist = []
					this.datalist = data.records
					this.totalPage = data.pages
					this.getHistory()
				})
			},
			async jieduan() {
				this.list = await this.$u.api.getCateTree({
					categoryType: 2
				})
				let arr = []
				this.list.map(item => {
					console.log(item);
					item.name = item.categoryName
				})
				this.leibie = this.list[this.current].categoryVOList
				this.form.counsellingSubject = this.leibie[0].id
				this.currents = 0
			},
			async del() {
				const res = await this.$u.api.delHistory({
					searchType: 2
				})
				this.$u.toast('删除成功')
				this.getHistory()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2 !important;
	}

	// /deep/.u-action-active {
	// 	width: 99rpx !important;
	// 	height: 46rpx !important;
	// 	background: linear-gradient(90deg, #FF8D5F, #FF6A55);
	// 	border-radius: 23rpx 23rpx 23rpx 23rpx;
	// }

	.content {

		.header-ss {
			margin: 0 39rpx 0 30rpx;
			position: relative;
			margin-top: 40rpx;

			.search {
				z-index: 99999999999;
				position: absolute;
				right: 12rpx;
				top: 9rpx;
				width: 99rpx;
				height: 46rpx;
				background: linear-gradient(90deg, #FF8D5F, #FF6A55);
				border-radius: 23rpx 23rpx 23rpx 23rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 46rpx;
			}
		}

		.history {
			margin-top: 68rpx;

			.des {
				padding: 0 40rpx 0 53rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.list {
				margin-top: 33rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding: 0 114rpx 0 52rpx;

				.list-item {
					height: 54rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 13rpx 28rpx 16rpx 20rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;

					.class {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #656565;
					}
				}
			}
		}
		.teacher-item {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding: 0 20rpx 0 32rpx;
			height: 320rpx;
			background: #FFFFFF;
			border-radius: 35rpx;
			margin-left: 25rpx;
			margin-right: 25rpx;
			.boxs {
				display: flex;
		
				.left {
					text-align: center;
					margin-top: 30rpx;
					margin-right: 30rpx;
		
					p {
						margin-top: 20rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
		
				.center {
					margin-top: 40rpx;
		
					view {
						font-size: 34rpx;
						font-weight: bold;
						color: #000;
						display: flex;
						align-items: center;
					
					}
					
					p {
						margin-top: 10rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #9D9D9D;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					
		
					.grade {
						margin-top: 19rpx;
						width: 90rpx;
						height: 35rpx;
						line-height: 45rpx;
						padding-left: 12rpx;
		
						border-radius: 5rpx;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-right: 10rpx;
						background: #ffbf55;
					}
		
					.grade18 {
						background: #ffbf55;
					}
		
					.grade19 {
						background: #be57ff;
					}
		
					.grade20 {
						background: #6a57ff;
					}
				}
			}
		
		
			.right {
		
				margin-top: 56rpx;
		
				view {
					display: flex;
					align-items: center;
		
					image {
						vertical-align: middle;
						width: 25rpx;
						height: 25rpx;
					}
		
					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6054;
					}
				}
		
			}
		}
	}
</style>